<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<head>
<style>
table{
    border-collapse: collapse;
    width: 100%;
}
th,td{
    text-align: left;
    width: 8px;
}
tr:nth-child(even){background-color: #f2f2f2;}
</style>
</head>
<body>
    <h1>响应式表格</h1>
<p>如果屏幕太小无法显示全部内容，响应表将显示水平滚动条。请调整浏览器窗口的大小以查看效果：</p>
<p>如需创建响应式表格，请用 <strong>overflow-x:auto</strong> 的容器元素（比如 div）包围表格元素：</p>

<div style="overflow-x:auto;">
<table>
<tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
</tr>
<tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
    <td>50</td>
</tr>
<tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>94</td>
    <td>94</td>
    <td>94</td>
    <td>94</td>
    <td>94</td>
    <td>94</td>
    <td>94</td>
    <td>94</td>
    <td>94</td>
    <td>94</td>
</tr>
<tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>67</std>
    <td>67</td>
    <td>67</td>
    <td>67</td>
    <td>67</td>
    <td>67</td>
    <td>67</td>
    <td>67</td>
    <td>67</td>
</tr>
</table>
</div>
</body>
</html>